<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>上传图片</title>
	<link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		html,
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
      position: relative;
		}

		body {
			background: url("./images/background02.png") no-repeat;
			background-size: 100%;
		}

		.upload-img {
			width: 73.084886%;
			height: 61.315789%;
			margin: 0 auto;
			margin-top: 16%;
		}

		.upload-img img {
			width: 100%;
			height: 100%;
			border-radius: 1rem;
		}

		form {
			display: none;
		}

		.show01 {
			width: 38.762887%;
			height: 15.263158%;
			margin: 0 auto;
			margin-top: 2rem;
		}

		.show01 img {
			width: 100%;
			height: 100%;
		}

		.dialog {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(38, 39, 40, 0.9);
			display: none;
		}

		.dialog-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: none;
		}

		.dialog-content .icon {
			width: 30.40%;
			height: 10.763158%;
			position: absolute;
			right: 2rem;
			top: 3rem;
		}

		.dialog-content .icon img {
			width: 100%;
			height: 100%;
		}

		.dialog-content .text {
			width: 81.237113%;
			height: 20.526316%;
			margin: 0 auto;
			position: absolute;
			top: 20%;
			left: 9.2%;
			color: #FFFFFF;
			font-size: 2.9rem;
			line-height: 4.2rem;
			font-family: "微软雅黑";
		}

		.xuanzhuan {
			position: absolute;
			margin: 0 auto;
			top: 25%;
			left: 30%;
			display: none;
		}
    /*图片上传区域*/
    .suwise-uploading{
      width: 72.9%;
      height: 54.4%;
      background: #fff;
      position: absolute;
      top: 7.8%;
      left: 13.5%;
      overflow: hidden;
      border-radius: 2%;
    }
    .suwise-uploading img{
      width: 100%;
      height: 100%;
    }
    /*关注我们按钮*/
    .suwise-follow-us{
      width: 20.7%;
      height: 4.3%;
      background: url("./images/followus.png") no-repeat;
      background-size: 100%;
      position: absolute;
      top: 64.8%;
      left: 66%;
    }
    /*二维码*/
    .suwise-qr-code{
      width: 26.5%;
      height: 14.8%;
      background: url("./images/qr_code.png") no-repeat;
      background-size: 100%;
      position: absolute;
      top: 70.7%;
      left: 7.4%;
    }
    /*旅行心语*/
    .suwise-words{
      width: 47%;
      height: 8.6%;
      /* background: url(./images/words/20.png) no-repeat; */
      /*background-size: 100%;*/
      position: absolute;
      top: 71.7%;
      left: 41%;
    }
    .suwise-words p{
      width: 100%;
      height: 100%;
      font-size: 2.2rem;
      color: #000;
      margin: 0 auto;
      box-sizing: border-box;
      overflow: hidden;
      display: -webkit-box;
      /*-webkit-box-pack:center;*/
      text-align: center;
      -webkit-box-align:center;
    }
    /*弹出层*/
    .suwise-shande{
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 999;
      background: url("./images/shade.png") no-repeat;
      background-size: 100%;
      display: none;
    }
	</style>
</head>

<body>
  <!--图片上传区域、关注我们、二维码、旅行心语-->
  <div class="suwise-uploading">
    <img src="images/background03.png" alt=""/>
  </div>
  <div class="suwise-follow-us"></div>
  <div class="suwise-qr-code"></div>
  <div class="suwise-words">
    <p>带着自己去旅行带着自己去旅行带着自己去旅行带着自己去旅行</p>
  </div>
  <div class="suwise-shande"></div>
  <!--关注我们、二维码、旅行心语//-->
	<!--<div class="xuanzhuan"><i class="fa fa-spinner fa-spin fa-5x" style="color:#e7e7e7;font-size:24rem;"></i></div>
	<div class="upload-img">
		<img id="upload_picture" src="./images/upload_picture.png" />
	</div>
	<div class="show01">
		<img src="./images/gaotie.png" />
	</div>-->

	<!--<div class="dialog">
	</div>
	<div class="dialog-content">
		<div class="icon"><img id="reset_upload" src="./images/file.png" /></div>
		<div class="text">将海报分享至微信朋友圈,即可领取现金红包。分享后截图发至“铁投启迪高铁时代广场”官方微信公众平台,还可参与现金红包抽奖</div>
	</div>-->
	<!--<form id="myform" method="post" action="http://www.aromair.cn/tt/upload_file.php" enctype="multipart/form-data">
		<input id="select_picture" name="file" type="file">
	</form>-->
	<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="./js/jquery.form.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
	<script type="text/javascript">
		// 微信配置
		wx.config({
			debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '', // 必填，公众号的唯一标识
			timestamp: , // 必填，生成签名的时间戳
			nonceStr: '', // 必填，生成签名的随机串
			signature: '', // 必填，签名，见附录1
			// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			jsApiList: [
				'checkJsApi',
				'onMenuShareTimeline',
				'onMenuShareAppMessage',
				'onMenuShareQQ',
				'onMenuShareWeibo',
				'hideMenuItems',
				'showMenuItems',
				'hideAllNonBaseMenuItem',
				'showAllNonBaseMenuItem',
				'translateVoice',
				'startRecord',
				'stopRecord',
				'onRecordEnd',
				'playVoice',
				'pauseVoice',
				'stopVoice',
				'uploadVoice',
				'downloadVoice',
				'chooseImage',
				'previewImage',
				'uploadImage',
				'downloadImage',
				'getNetworkType',
				'openLocation',
				'getLocation',
				'hideOptionMenu',
				'showOptionMenu',
				'closeWindow',
				'scanQRCode',
				'chooseWXPay',
				'openProductSpecificView',
				'addCard',
				'chooseCard',
				'openCard'
			]
		});

		wx.ready(function() {

			// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

		});
		wx.error(function(res) {
			// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
			console.log(res)
		});

		$(document).ready(function() {


			//适配屏幕
			var body_width = $("body").width();
			var body_height = $("body").height();
			$("body").css({
				"background-size": body_width + "px " + body_height + "px"
			});

			//上传图片
			$("#upload_picture").click(function() {
				$("#select_picture").trigger("click");
			});

			//选择图片后 提交
			$("#select_picture").change(function() {
				$("#myform").submit();
				$(".xuanzhuan").show();
			});

			//我要领红包
			$("#get_money").click(function() {
				$(".dialog").show();
				$(".dialog-content").show();
			});

			//重新选择图片
			$("#reset_upload").click(function() {
				$("#select_picture").trigger("click");
			});

			//点击背景弹框说明消失
			$(".dialog").click(function() {
				$(this).hide();
				$(".dialog-content").hide();
			});

			//上传图片操作
			// $(function() {
			// 	var options = {
			// 		url: 'http://www.aromair.cn/tt/upload_file.php',
			// 		success: function(data) {
			// 			$(".xuanzhuan").hide();
			// 			window.location.href = "end.html?name=" + data + "&flag=1";
			// 		},
			// 		resetForm: true,
			// 		dataType: 'json'
			// 	};
			//
			// 	$('#myform').submit(function() { //注意这里的index_form
			// 		$(this).ajaxSubmit(options);
			// 		return false; //防止dialog 自动关闭
			// 	});
			// });

			// 绑定上传操作
			$('#upload_picture').on('touchend', function() {
				// 尝试从相机和相册中获取图片
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						console.log('选中图片')
						var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						// 尝试上传
						wx.uploadImage({
							localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
							isShowProgressTips: 1, // 默认为1，显示进度提示
							success: function(res) {
								var serverId = res.serverId; // 返回图片的服务器端ID
								uploadComplete(serverId)
							}
						});
					}
				});
			})

			// 微信上传后的回调函数
			function uploadComplete(localIds) {
				alert(JSON.stringify(localIds))
			}
		});
	</script>
  <script>
    /*弹出层*/
    $(function(){
      $('.suwise-follow-us').click(function(){
        $('.suwise-shande').fadeIn(100).click(function(){
          $('.suwise-shande').fadeOut(100);
        })
      })
    });
  </script>
</body>

</html>
